<template>
  <div class="first_audit">
    <!--电核专员移单-->
    <div class="search">
      <el-form ref="form" :inline="true" :model="form">
        <el-form-item label="选择电核专员" prop="userName" :label="$t('tel.chooseTelOfficer')">
          <el-select v-model="form.userName" @change="changeAccount">
            <el-option v-for="(item, $index) in selectList" :label="item.userName" :value="item.userName" :key="$index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分配给" prop="newAccountId" :label="$t('authority.allotTo')">
          <el-select v-model="form.newAccountId">
            <el-option value="" label="请选择" :label="$t('verify.plsChoose')"></el-option>
            <el-option v-for="(item, $index) in filterAccount" :label="item.userName" :value="item.userId" :key="$index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="move">{{$t('authority.allot')}}</el-button>
          <el-button type="primary" @click="updateActiveTab">{{$t('authority.back')}}</el-button>
        </el-form-item>
      </el-form><!--end form-->
    </div>
    <div class="data_list">
      <el-table ref="table" :data="tableData" :max-height="tableMaxHeight" style="width: 100%;" highlight-current-row @select-all="selectAll" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="userName" :label="$t('common.name')" min-width="110"></el-table-column>
        <el-table-column prop="userId" label="User ID" min-width="80"></el-table-column>
        <el-table-column prop="cardId" :label="$t('common.identityNumber')" min-width="140">
          <template slot-scope="scope">
            <a @click="goDetail(scope.row)" type="text" size="small" v-if="scope.row.cardId" href="javascript:void(0);">{{ scope.row.cardId }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="120"></el-table-column>
        <el-table-column prop="userType" :label="$t('common.userType')" min-width="100">
          <template slot-scope="scope">{{ scope.row.userType | switchUserType }}</template>
        </el-table-column>
        <el-table-column prop="orderNid" :label="$t('common.innerOrderId')" min-width="200">内部订单号</el-table-column>
        <el-table-column prop="borrowTime" :label="$t('common.applyDate')" min-width="160">
          <template slot-scope="scope">{{ scope.row.borrowTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
        </el-table-column>
        <el-table-column prop="checkTime" :label="$t('tel.incomingTime')" min-width="160">
          <template slot-scope="scope">{{ scope.row.checkTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
        </el-table-column>
        <el-table-column prop="assignTime" :label="$t('tel.timeDispatch')" min-width="160">
          <template slot-scope="scope">{{ scope.row.assignTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
        </el-table-column>
        <el-table-column prop="lastVerifyTime" :label="$t('tel.lastFollowTime')" min-width="160">
          <template slot-scope="scope">{{ scope.row.lastVerifyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
        </el-table-column>
        <!--新增跟进次数-->
        <el-table-column prop="followCount" label="跟进次数" :label="$t('tel.followTimes')" min-width="100"></el-table-column>
        <!--新增首次跟进时长-->
        <el-table-column prop="firstFollowTime" label="首次跟进时长" :label="$t('tel.firstFollowTimeStamp')" min-width="130"></el-table-column>
        <el-table-column prop="overdueHours" label="未跟进时长" :label="$t('tel.unFollowTime')" min-width="130">
          <template slot-scope="scope">{{ isNaN(scope.row.overdueHours) ? '--'  : (scope.row.overdueHours) }}</template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" :label="$t('common.reason')" min-width="300">
          <template slot-scope="scope">
            <span v-for="item in scope.row.rciList">{{ item.resonCodeReturn + '-' + item.reasonCode + ';' + ' ' }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="remark" :label="$t('common.remark')" min-width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="telingOperPeopleNameList" prop="operPeopleName" :label="$t('tel.operationStaff')" min-width="120"></el-table-column>
        <el-table-column v-if="telingTeamList" prop="team" :label="$t('tel.group')" min-width="120"></el-table-column>
      </el-table>
    </div>
    <pagination @pageChange="pageChange" :page="page">分页组件</pagination>
  </div>
</template>

<script>
  import Pagination from '@/components/pagination';
  import mixin from '@/service/mixin';
  import storage from '@/libs/storage';

  let that = null;
  export default {
    name: 'telOrderList',
    components: {
      Pagination
    },
    mixins: [mixin],
    props: {
      activeTab: {
        type: String
      },
      searchForm: {
        type: Object
      }
    },
    data() {
      return {
        form: {
          userName: '',
          newAccountId: ''
        },
        // entrySwitchInfo: '',
        listRoleType: [],
        selectList: [],
        selectedList: [],
        auditorList: [],
        moveToSelectList: [],
        adminUserIdsList: [],
        username: '',
      };
    },
    watch: {
      activeTab(val) {
        if (val === 'telOrderList') {
          this.form.userName = this.searchForm.userName;
          this.form.newAccountId = '';
          this.page.currentPage = 1;
          this.getTableData();
          this.getTelStaff();
        }
      },
      //  选择电核转员 form.userName
      'form.userName'(val) {
        if (val) {
          this.getMoveToOption();
        }
      },
    //  分配给
      'form.newAccountId'(val) {
        if (val) {
          this.moveToSelectList.forEach((item) => {
            if (item.userId === this.form.newAccountId) {
              this.username = item.userName;
            }
          });
          // this.getDepotInfo();
        }
      },
    },
    computed: {
      filterAccount() {
        if (this.form.userName === this.form.newAccountId) {
          this.form.newAccountId = '';
        }
        return this.moveToSelectList.filter(item => item.userName !== this.form.userName);
      },
      telingOperPeopleNameList() {
        // 列表操作人员不对专员显示
        return this.$store.getters.checkUserAuthority('/telingOperPeopleNameList');
      },
      telingTeamList() {
        // 列表操作人员不对专员显示
        return this.$store.getters.checkUserAuthority('/telingTeamList');
      },
    },
    methods: {
      getTableData(page = this.page) {
        const user = storage.get('user');
        const params = {
          type: 1,
          loginId: user.id,
          operPeopleName: this.form.userName,
          page: {
            pageNo: page.currentPage,
            pageSize: this.page.pageSize
          },
          language: storage.getLocal('language'),
        };
        this.$api.tel.queryCheckOrder(params).then((res) => {
          const { status, data, error } = res;
          if (status === '1' && error === '00000000') {
            this.tableData = data.data || [];
            this.page.recordsTotal = data.pageCount;
            this.tableMaxHeight = window.document.body.clientHeight - 265;
          }
        });
      },
      // getDepotInfo() {
      //   const params = {
      //     roleId: 1,
      //     userName: this.username,
      //     leaderId: '',
      //   };
      //   this.$api.tel.getAllUserInfo(params).then((res) => {
      //     const { status, data, error } = res;
      //     if ('1' === status && '00000000' === error) {
      //       this.entrySwitchInfo = data.data[0].entrySwitch;
      //     }
      //   });
      // },
      changeAccount(val) {
        this.page.currentPage = 1;
        this.getTableData();
      },
      // 获取电核专员
      getTelStaff() {
        const params = {
          roleId: 1,
          userName: '',
          leaderId: '',
          loginId: storage.get('user').id,
        };
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error) {
            this.selectList = data.data;
          }
        });
        this.getMoveToOption();
      },
      getMoveToOption() {
        const user = storage.get('user');
        const params = {
          roleId: 1,
          userName: '',
          leaderId: '',
          loginId: user.id,
        };
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error) {
            this.moveToSelectList = data.data;
          }
        });
      },
      move() {
        if (this.selectedList.length === 0) {
          this.$message.warning(this.$t('authority.chooseOrder'));
          return false;
        }
        if (!this.form.newAccountId) {
          this.$message.warning(this.$t('authority.chooseAlloter'));
          return false;
        }
        // 如果为关库状态，则无法移单
        // if (this.entrySwitchInfo == 0) {
        //   this.$message.warning(this.$t('tel.depotNoMove'));
        //   return false;
        // }
        const params = {
          operPeopleId: this.form.newAccountId,
          orderNids: this.selectedList,
        };
        this.$api.tel.distributeOrder(params).then((res) => {
          const { status, error } = res;
          if ('1' === status && '00000000' === error) {
            this.$message.success(this.$t('authority.moveOrderSucc'));
            this.getTableData();
          }
        });
        return true;
      },
      handleSelectionChange(val) {
        // console.log(val);
        this.selectedList = [];
        val.forEach((item) => {
          this.selectedList.push(item.orderNid);
        });
        // console.log(this.selectedList);
      },
      selectAll(selection) {
        const tableWrap = this.$refs.table;
        const table = tableWrap.$el.querySelector('.el-table__body-wrapper');
        const tableHeader = tableWrap.$el.querySelector('.el-table__header-wrapper');
        if (table) {
          tableHeader.scrollLeft = 0;
        }
      },
      updateActiveTab() {
        this.$emit('updateActiveTab', 'customAssistant');
      },
      goDetail(row) {
        this.$api.tel.getOrderInfo({ orderNid: row.orderNid }).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && error === '00000000') {
            this.orderStatus = data[0].checkStatus;
            if (this.orderStatus == 1) {
              this.$openNewBlank(`#/conf/tel-detail/${row.userId}/${this.$root.local}/${row.orderNid}/${row.checkStatus}/${row.operPeopleId}/${row.userType}`);
            } else if (this.orderStatus !== 1) {
              this.$message.success(this.$t('xsDetails.orderHasDeal'));
              this.getTableData({ currentPage: this.page.currentPage });
            }
          }
        });
      },
    },
    filters: {
      switchUserType(type) {
        switch (+type) {
          case 0:
            return that.$t('common.newUser');
          case 1:
            return that.$t('common.secNewUser');
          case 2:
            return that.$t('common.oldUser');
          default:
            return '';
        }
      },
    },
    created() {
      that = this;
      if (this.activeTab === 'telOrderList') {
        this.form.userName = this.searchForm.userName;
        this.page.currentPage = 1;
        this.getTableData();
        this.getTelStaff();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .search{
    background-color: #fff;
    padding: 22px 40px 0;
  }
  .data_list{
    margin: 16px 24px;
    padding: 16px;
    background-color: #fff;
  }
</style>
